{extend name="common:base" /}
{block name="page_current"}
<div class="fui-page-group statusbar">
    <style>
        .yen{border:none;height:0.75rem;width:0.75rem;display: inline-block;background: #ff4753;color:#fff;font-size:0.4rem;line-height: 0.8rem;text-align: center;
            font-style: normal;border-radius: 0.75rem;-webkit-border-radius: 0.75rem;}
        .order-create-page .fui-list.goods-item .fui-list-inner{
            height: 3.5rem;
            align-self: center;
        }
        .order-create-page .fui-list.goods-item .fui-list-angle{
            height: 3.5rem;
            align-self: center;
        }
        .order-create-page .fui-list-inner .subtitle{
            display: block;
        }
        .fui-header a.back2:before {
            content: " ";
            display: inline-block;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
            height: 0.5rem;
            width: 0.5rem;
            border-width: 0 0 2px 2px;
            border-color: #666;
            border-style: solid;
            position: relative;
            top:0;
        }
    </style>
    <div class="fui-page order-create-page fui-page-current" id="fui-page-1533121130567">
        <div class="fui-header">
            <div class="fui-header-left">
                <a class="back2"></a>
            </div>
            <div class="title">确认订单</div>
            <div class="fui-header-right" data-nomenu="true">&nbsp;</div>
        </div>
        <div class="fui-content  navbar">
            <!--后期开放 上门自提
            <div id="carrierTab" class="fui-tab fui-tab-danger" style="margin-bottom: 0">
                <a data-tab="tab1" class="active">快递配送</a>
                <a data-tab="tab2" class="">上门自提</a>
            </div>
            -->
            <!--地址选择-->
            <div class="fui-list-group" id="addressInfo" style="margin: 0 0 0.5rem; display: block;">
                <div class="fui-list" v-show="!noAddress" @click="goAddressSelector(address.id)" :data-addressid="address.id" data-nocache="true">

                    <div class="fui-list-media">
                        <i class="icon icon-dingwei1"></i>
                    </div>
                    <div class="fui-list-inner">
                        <div class="title has-address">
                            收货人：
                            <span class="realname">{{address.realname}}</span>
                            <span class="mobile">{{address.mobile}}</span>
                        </div>
                        <div class="text has-address">
                            <span class="address">{{ fullAddress }}</span>
                        </div>
                    </div>
                    <div class="fui-list-angle">
                        <div class="angle"></div>
                    </div>
                </div>
                <a href="{:url('Member/address_selector')}" v-show="noAddress" class="fui-list" data-nocache="true">
                    <div class="fui-list-inner">
                        <div class="text no-address"><i class="icon icon-add1"></i> 添加收货地址</div>
                    </div>
                    <div class="fui-list-angle">
                        <div class="angle"></div>
                    </div>
                </a>
            </div>
            <!--自提点选择-->
            <div class="fui-list-group" id="carrierInfo" style="margin: 0px 0px 0.5rem; display: none;">
                <a class="fui-list" href="./index.php?i=1&amp;c=entry&amp;m=ewei_shopv2&amp;do=mobile&amp;r=store.selector&amp;type=1&amp;merchid=0" data-nocache="true">
                    <div class="fui-list-media" style="display: none">
                        <i class="icon icon-dingwei1"></i>
                    </div>
                    <div class="fui-list-inner">
                        <div class="no-address"><i class="icon icon-icon02"></i> 请选择自提门店</div>
                        <div class="title storename" style="display: none"></div>
                        <div class="subtitle" style="display: none">
                            <span style="overflow: hidden;display: inline-block;">联系人：</span>
                            <span class="realname"></span>
                            <span class="mobile" id="carrierInfo_mobile"></span>
                        </div>
                        <div class="text" style="display: none"><span class="address">地址：</span></div>
                    </div>
                    <div class="fui-list-angle">
                        <div class="angle"></div>
                    </div>
                </a>
            </div>
            <!--联系填写-->
            <div class="fui-cell-group sm" id="memberInfo" style="display: none;">
                <div class="fui-cell">
                    <div class="fui-cell-label sm">联系人</div>
                    <div class="fui-cell-info c000"><input type="text" placeholder="请输入联系人" data-set="0" name="carrier_realname" class="fui-input" value="李先森" data-value="李先森"></div>
                </div>
                <div class="fui-cell">
                    <div class="fui-cell-label sm">联系电话</div>
                    <div class="fui-cell-info c000"><input type="tel" placeholder="请输入联系电话" data-set="0" name="carrier_mobile" class="fui-input" value="13040759660" data-value="13040759660"></div>
                </div>
            </div>
            <a class="fui-cell-group city_express external" style="display: none;">
                <div class="fui-cell">
                    <div class="fui-cell-text" style="line-height: 1.1rem">
                        <span><i class="icon icon-huoche" style="background: #fff;color: #20c94d;font-size: 1.1rem;line-height: 1.1rem;float: left;display: inline-block;margin-right: 0.2rem"></i></span>
                        <span class="sale-line">本单支持同城配送</span>
                    </div>
                    <div class="fui-cell-remark"></div>
                </div>
            </a>
            <div class="fui-list-group">
                <div class="fui-list-group-title"><i class="icon icon-shop"></i> 商城</div>
                {volist name="goodsList" id="g"}
                <div class="fui-list goods-item align-start">
                    <div class="fui-list-media">
                        <a href="{:url('Goods/detail',['id' => $g['id']])}">
                            <img class="round" src="{:getGoodsThumb($g['thumbs'])}">
                        </a>
                    </div>
                    <div class="fui-list-inner">
                        <a href="{:url('Goods/detail',['id' => $g['id']])}">
                            <div class="subtitle">
                                {$g['goods_name']}
                            </div>
                            <div class="text">
                                {:getGoodsOptionTitle($g,$g['option_id'])}
                            </div>
                        </a>
                    </div>
                    <div class="fui-list-angle" style="width: auto">
                        <span style="font-size: .65rem;color: #000">￥<span class="marketprice">{:getGoodsOptionField($g,$g['option_id'],'market_price')}</span></span>
                        <div class="num">
                            <div class="fui-number small"
                                 data-value="{if(empty($g['cart_total']))}1{else /}{$g['cart_total']}{/if}"
                                 data-unit="" data-maxbuy="99" data-minbuy="0" data-goodsid="{$g['id']}">
                                <div class="minus disabled">-</div>
                                <input class="num shownum" type="tel" name="" value="{if(empty($g['cart_total']))}1{else /}{$g['cart_total']}{/if}">
                                <div class="plus">+</div>
                            </div>
                        </div>
                    </div>
                </div>
                {/volist}
                <div class="fui-cell-group" style="margin-top: 0">
                    <div class="fui-cell  lineblock ">
                        <div class="fui-cell-info c000" style="text-align: right;">共
                            <span id="goodscount" class="text-danger bigprice"></span>
                            件商品
                            共计：<span class="text-danger bigprice">¥ <span class="goodsprice"></span></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="fui-cell-group">
                <div class="fui-cell fui-cell-textarea">
                    <div class="fui-cell-label" style="margin:.15rem 0 0 0">
                        买家留言
                    </div>
                    <div class="fui-cell-info c000">
                        <textarea rows="2" placeholder="50字以内（选填）" id="remark"></textarea>
                    </div>
                </div>
            </div>
            <div class="fui-cell-group">
                <input type="hidden" id="weight" name="weight" value="0" data-value="0">
                <div class="fui-cell">
                    <div class="fui-cell-label">商品小计</div>
                    <div class="fui-cell-info"></div>
                    <div class="fui-cell-remark noremark">¥ <span class="goodsprice"></span></div>
                </div>
                <!--任务中心if闭合-->
                <div class="fui-cell" id="showdispatchprice" style="display: flex;">
                    <div class="fui-cell-label">运费</div>
                    <div class="fui-cell-info"></div>
                    <div class="fui-cell-remark noremark">¥ <span class="dispatchprice">0.00</span></div>
                </div>
                <div class="fui-cell" id="coupondeduct_div" style="display:none">
                    <div class="fui-cell-label" style="width:auto" id="coupondeduct_text"></div>
                    <div class="fui-cell-info"></div>
                    <div class="fui-cell-remark noremark">-¥ <span id="coupondeduct_money">0</span></div>
                </div>
            </div>
        </div>
        <div class="fui-navbar order-create-checkout">
            <a href="javascript:;" class="nav-item total">
                <p style="color: #000">
                    需付：<span class="text-danger  bigprice">¥ <span class="totalprice"></span></span>
                </p>
            </a>
            <a href="javascript:submitOrder();" class="nav-item btn btn-danger buybtn">立即支付</a>
        </div>
        <!-- 放弃付款--><!--class="fui-mask visible"-->
        <div id="giveUp" style="display:none">
            <div class="giveUp-alert">
                <div class="giveUp-title">确定要放弃付款吗？</div>
                <div class="giveUp-subtitle">喜欢的商品可能随时会被抢空哦</div>
                <div class="giveUp-btn">
                    <a class="btn btn-default block cancel">取消</a>
                    <a class="btn btn-default block cancel back" style="color: #ff5555;border-left:0;">确定</a>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <script>
        var goods = {$goodsMap|raw};
        var user_address = {:json_encode($address,256)};
        var noAddress = {$noAddress};
    </script>
    <script>
        $(function(){
            $(".package-goods-img").height($(".package-goods-img").width());
            initGoBackTip();
            updateAddress();
            setTimeout(function () {
                caculate();
            },500)
        })
        function initGoBackTip() {
            $(".back2").click(function(){
                $("#giveUp").css("display","block")
            })
            $("#giveUp .cancel").click(function(){
                $("#giveUp").css("display","none")
            })
        }
        $('.fui-number').each(function (i, row) {
            var that = $(this);
            var maxbuy = that.data('maxbuy') || 0,
                goodsid = that.data('goodsid'),
                minbuy = that.data('minbuy') || 0,
                unit = that.data('unit') || '件';

            that.numbers({
                max: maxbuy,
                min: minbuy,
                minToast: "{min}" + unit + "起售",
                maxToast: "最多购买{max}" + unit,
                callback: function(num) {
                    $.each(goods, function(i,row) {
                        if (this.goodsid == goodsid) {
                            this.total = num;
                            return false
                        }
                    });
                    caculate()
                }
            })
        });
        // 计算价格 需付等
        function caculate() {
            var totalPrice = 0;
            var totalNum = 0;
            $('.goods-item').each(function (i, row) {
                var num = parseInt($(this).find('input.num').val());
                var price = parseFloat($(this).find('.marketprice').html());
                totalNum += num;
                totalPrice += (price * num);
            })
            $('#goodscount').html(totalNum);
            $('.goodsprice').html(core.number_format(totalPrice, 2));
            // 计算 商品价格和数量 完

            // 后期 会 加入 优惠券等
            $('.totalprice').html($('.goodsprice').html());
        }
        function updateAddress() {
            var address = store.get('select_address');
            if (address) {
                Vue.set(vueAddressInfo,'address',address);
            }
            else{
                Vue.set(vueAddressInfo,'address',user_address);
            }
        }
        function submitOrder() {
            core.json("{:url('m/Order/submit_order')}",{address_id:$('[data-addressid]').data('addressid'),remark:$('#remark').val(),goods:JSON.stringify(goods)},function (json) {
                if(json.code){
                    // 提交成功，删除 购物车选项
                    core.setCartTmpSelectedGoodsId([]);

                    location.replace("{:url('m/Order/pay')}?id=" + json.data.order_id);
                }
                else{
                    FoxUI.toast.show(json.msg);
                }
            },true,true);
        }
    </script>
    <script>
        var vueAddressInfo = new Vue({
            el: '#addressInfo',
            data: {
                noAddress:noAddress
                // ,address:user_address
                ,address:{}
            }
            ,
            methods:{
                goAddressSelector:function (_id) {
                    console.log('goAddressSelector')
                    var baseUrl = "{:url('Member/address_selector')}";
                    // $.router.load(baseUrl + '?select_id=' + _id);
                    location.href = baseUrl + '?select_id=' + _id;
                }
            },
            computed:{
                fullAddress:function () {
                    var _that = this;
                    return (_that.address.province || '') + (_that.address.city || '') + (_that.address.area || '') + ' ' + _that.address.address
                }
            }
        });
    </script>
</div>
{/block}
{block name="script"}

{/block}